<template>
    <div class="hello">
        <div id="main">
            <div>头部的东西 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem enim et ipsa iusto minus, mollitia omnis quae quam rerum? Facere illum incidunt iste itaque minus perferendis quisquam sint tempore?</div>
            <div class="" style="background: lime;height: 500px;">妖怪合影 Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quis, ratione! Architecto commodi debitis delectus distinctio ea, eius harum incidunt, iusto natus necessitatibus nemo odio qui sapiente temporibus tenetur voluptatibus!</div>
            <div class="" style="background: pink;height: 500px;">猴歌Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quis, ratione! Architecto commodi debitis delectus distinctio ea, eius harum incidunt, iusto natus necessitatibus nemo odio qui sapiente temporibus tenetur voluptatibus!</div>
            <div class="d_jump" id="anchor0" style="background: red;height: 200px;">我的Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quis, ratione! Architecto commodi debitis delectus distinctio ea, eius harum incidunt, iusto natus necessitatibus nemo odio qui sapiente temporibus tenetur voluptatibus!</div>
            <div class="d_jump" id="anchor1" style="background:yellow;height: 300px;">狐狸精Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quis, ratione! Architecto commodi debitis delectus distinctio ea, eius harum incidunt, iusto natus necessitatibus nemo odio qui sapiente temporibus tenetur voluptatibus!</div>
            <div class="d_jump" id="anchor2" style="background:pink;height: 400px;" >白骨精Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quis, ratione! Architecto commodi debitis delectus distinctio ea, eius harum incidunt, iusto natus necessitatibus nemo odio qui sapiente temporibus tenetur voluptatibus!</div>
            <div class="" style="background: lime;height: 500px;">蜘蛛精Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quis, ratione! Architecto commodi debitis delectus distinctio ea, eius harum incidunt, iusto natus necessitatibus nemo odio qui sapiente temporibus tenetur voluptatibus!</div>
        </div>
        <ul style="padding:0;position: fixed;bottom:0;left: 0;width: 100%;height: 40px;background: #fff;color:#000;display: flex;align-items: center;justify-content: space-around">
            <li @click="clickNav(0)" :class="{'active':active === 0}">我的</li>
            <li @click="clickNav(1)" :class="{'active':active === 1}">狐狸精</li>
            <li @click="clickNav(2)" :class="{'active':active === 2}">白骨精</li>
            <li>蜘蛛精</li>
        </ul>

    </div>
</template>
<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data() {
            return {
                active:'',

            }
        },
        mounted() {
            this.$nextTick(function () {
                window.addEventListener('scroll',this.handleScroll)  // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
                window.addEventListener('resize', this.handleScroll); // 当浏览器大小发生变化时，重新计算各个offsetTop
            })
        },
        methods:{
            handleScroll() {
                // console.log('滚动')
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
                var anchorOffset0 = this.$el.querySelector('#anchor0').offsetTop
                var anchorOffset1 = this.$el.querySelector('#anchor1').offsetTop
                var anchorOffset2 = this.$el.querySelector('#anchor2').offsetTop
                // var anchorOffset3 = this.$el.querySelector('#anchor3').offsetTop

                if(scrollTop>=anchorOffset0&&scrollTop<anchorOffset1){
                    this.active = 0
                }else if(scrollTop>=anchorOffset1&&scrollTop<anchorOffset2){
                    this.active = 1
                }else if(scrollTop>=anchorOffset2){
                    this.active = 2
                }else {
                    this.active = ''
                }
            },
            goAnchor(index) {
                // console.log('inde22x', index)
                window.removeEventListener("scroll", this.handleScroll);
                // document.querySelector('#anchor'+index).scrollIntoView();
                this.active = index;
                // var anchor = this.$el.querySelector('#anchor'+index)
                // document.body.scrollTop = anchor.offsetTop
                // document.documentElement.scrollTop = anchor.offsetTop

                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
                let jump = document.querySelectorAll('.d_jump')
                let total = jump[index].offsetTop
                // 平滑滚动，时长500ms，每10ms一跳，共50跳
                let step = total / 50
                if (total > scrollTop) {
                    smoothDown()
                    // window.removeEventListener("scroll", this.handleScroll);
                }else {
                    let newTotal = scrollTop - total
                    step = newTotal / 50
                    smoothUp()
                    // window.removeEventListener("scroll", this.handleScroll);
                }
                function smoothDown () {
                    if (scrollTop < total) {
                        scrollTop += step
                        document.body.scrollTop = scrollTop
                        document.documentElement.scrollTop = scrollTop
                        setTimeout(smoothDown, 10)
                    } else {
                        document.body.scrollTop = total
                        document.documentElement.scrollTop = total
                    }
                }
                function smoothUp () {
                    if (scrollTop > total) {
                        scrollTop -= step
                        document.body.scrollTop = scrollTop
                        document.documentElement.scrollTop = scrollTop
                        setTimeout(smoothUp, 10)
                    } else {
                        document.body.scrollTop = total
                        document.documentElement.scrollTop = total
                    }
                }
            },
            runAsync(index){
                return new Promise((resolve) => {
                    this.goAnchor(index)
                    resolve(index)
                });
            },
            clickNav(index) {
                // window.removeEventListener("scroll", this.handleScroll);
                // this.active = index
                // console.log('index',index)
                // var pageId = document.querySelector('#anchor' + index)
                // console.log(pageId.offsetTop)
                //
                // window.scrollTo({
                //     'top':pageId.offsetTop,
                //     'behavior':'smooth'
                // })
                // setTimeout(() => {
                //     window.addEventListener('scroll',this.handleScroll)
                // }, 300)
                this.runAsync(index).then(() => {
                    console.log('index33333', index)
                    setTimeout(() => {
                        window.addEventListener('scroll',this.handleScroll)
                    }, 500)
                })
            },

        },
      destroy() {
            // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
            window.removeEventListener('scroll', this.handleScroll)
        }
    }
</script>



<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }
    .active{
        background: red;
    }
    a {
        color: #42b983;
    }
</style>


